import React,{Component} from 'react';
import {Input,InputNumber,Cascader,Select,DatePicker,Form} from 'antd';
const Option = Select.Option;
const FormItem = Form.Item;
const {MonthPicker,RangePicker,WeekPicker} = DatePicker;

const SearchType =({data,form})=>{
    switch (data.type){
        case 'input':
            return <SearchInput column={data} form={form}/>
        case 'inputnumber':
            return <SearchNum column={data} form={form}/>
        case 'cascader':
            return <SearchCascader column={data} form={form}/>
        case 'select':
            return <SearchSelect column={data} form={form}/>
        case 'datepicker':
            return <SearchDate column={data} form={form}/>
        case 'monthpicker':
            return <SearchDate column={data} form={form}/>
        case 'rangePicker':
            return <SearchDateRange column={data} form={form}/>
        case 'weekPicker':
            return <SearchDate column={data} form={form}/>
        default:
            return;
    }
}
const formItemLayout = {
    labelCol: {
        xs: { span:24},
        sm: { span:4},
    },
    wrapperCol: {
        xs: { span:24},
        sm: { span:20 },
    },
};
const SearchInput = ({column,form})=> {
    const {placeholder,disable,lable,value,rules} = column;
    const {getFieldDecorator} = form;
    return (
        <FormItem label={lable}  {...formItemLayout}>
            {getFieldDecorator(value,{
                rules :rules
            })(
                <Input placeholder={placeholder} disabled={disable || false} style={{width:'100%'}}/>
            )}
        </FormItem>
    )
}
const SearchNum = ({column,form})=> {
    const {placeholder,disable,min,max,lable,value,rules} = column;
    const {getFieldDecorator} = form;
    return (
        <FormItem label={lable}  {...formItemLayout}>
            {getFieldDecorator(value,{
                rules :rules
            })(
                <InputNumber placeholder={placeholder} disabled={disable || false}
                        min={min || 0} max={max || 99}
                        style={{width:'100%'}}/>
            )}
        </FormItem>
    )
}
const SearchCascader = ({column,form})=>{
    const {placeholder,options,lable,value,rules} = column;
    const {getFieldDecorator} = form;
    return(
        <FormItem label={lable}  {...formItemLayout}>
            {getFieldDecorator(value,{
                rules :rules
            })(
                <Cascader options={options} placeholder={placeholder}
                        style={{width:'100%'}}/>
            )}
        </FormItem>
    )

}
const SearchSelect = ({column,form})=>{
    const {placeholder,options,lable,value,rules} = column;
    const {getFieldDecorator} = form;
    return(
        <FormItem label={lable}  {...formItemLayout}>
            {getFieldDecorator(value,{
                rules :rules
            })(
                <Select
                        placeholder={placeholder}
                        style={{width:'100%'}}>
                    {
                        options.map((item,index)=>{
                            return(
                                <Option key={'options'+index} value={item.value}>{item.lable}</Option>
                            )
                        })
                    }
                </Select>
            )}
        </FormItem>
    )

}
const SearchDate = (data)=>{

}

const SearchDateRange = (data)=>{

}
export default SearchType;
